<template>
  <div>
    <CloudProgress :percent="percent" />
    <CloudButtonGroup>
      <CloudButton icon="minus" @click="decline" />
      <CloudButton icon="plus" @click="increase" />
    </CloudButtonGroup>
  </div>
</template>
<script>
export default {
  title: '4.动态展示',
  data() {
    return {
      percent: 0,
    };
  },
  methods: {
    increase() {
      let percent = this.percent + 10;
      if (percent > 100) {
        percent = 100;
      }
      this.percent = percent;
    },
    decline() {
      let percent = this.percent - 10;
      if (percent < 0) {
        percent = 0;
      }
      this.percent = percent;
    },
  },
};
</script>
<style scoped>
.cloud-button.ant-btn {
  padding: 0px;
}
</style>